<template>
	<view class="container">
		<view class="content">
			<view class="bluetooth-status">
				<image src="/static/lanya.png" class="icon"></image>
				<view class="desc" v-if="bluetoothStatus">蓝牙已开启，连接成功！</view>
				<view class="desc" v-else @click="bluetoothReset">蓝牙未连接，<text
						style="color: blue;text-decoration: underline;">点击连接</text></view>
				<view class="num">机器：{{equipmentNo}}</view>
			</view>
			<view class="place"></view>
			<!-- <view @click="a">
				断开
			</view> -->
			<view class="seller-infor">
				<image :src="details.shopImage" mode="aspectFill" class="logo"></image>
				<view class="text">
					<view class="name-wrapper">
						<view class="name ell">{{details.shopName}}</view>
						<image src="/static/tel02.png" class="tel" @click="handlePhoneCall(details.shopPhone)"></image>
					</view>
					<view class="txt">
						<image src="/static/wifi.png" class="icon"></image>
						<view class="con ell" @click="toLinkWifi"><text
								class="acc ell">账号：{{details.wifiAccountNo || ''}}</text>密码：{{details.wifiPassword || ''}}
						</view>
					</view>
					<view class="txt" @click="handleOpenLocation">
						<image src="/static/address.png" class="icon"></image>
						<view class="con ell">
							{{details.provinceName || ''}}{{details.cityName || ''}}{{details.districtName || ''}}{{details.shopAddress || ''}}
						</view>
					</view>
				</view>
			</view>
			<view class="nav-wrapper">
				<view class="nav-item" v-for="(nav, index) in navList" @click="toLink(nav.path)" :key="index">
					<image :src="nav.icon" class="icon"></image>
					<view class="title">{{nav.title}}</view>
				</view>
			</view>
			<view class="mobile-charge" :disabled="(this.equipmentNo.length == 12) || !bluetoothStatus" @click="mobileCharge">手机充电</view>
			<view class="product-wrapper">
				<view class="title" >在线购买</view>
				<view class="product-list">
					<view class="product-item" v-for="product in list" :key="product.equipmentProductId">
						<view class="img-wrapper">
							<image :src="product.productImage" mode="aspectFill" class="img"></image>
							<!-- <view class="line-wrapper" v-if="product.store <= 0">
								<view class="line"></view>
								<view class="dian"></view>
								<view class="line"></view>
							</view> -->
							<view class="sload-none" v-if="product.store <= 0">
								<image class="solod-img" src="/static/sold-out.png" mode=""></image>
							</view>
						</view>
						<view class="text">
							<view class="name ell">{{product.productName}}</view>
							<view class="specifications ell" v-if="product.normal">{{product.normal}}</view>
							<view class="price">¥ {{product.price}}</view>
						</view>
						<!--  -->
						<button type="default" class="btn" :disabled="(product.store <= 0) || !bluetoothStatus"
							@click="confirmOrder(product.equipmentProductId,index)">立即购买</button>
					</view>
				</view>
				<view class='no-data' v-if="list.length < 1 && isLoad">暂无数据</view>
				<view class='end' v-if="loadingFinsh && list.length > 0">没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import {
		getByEquipmentNo,
		equipmentProductPage
	} from '@/api/online.js'
	import {
		shopDetail
	} from '@/api/store.js';
	import bluetoothDevice from '@/utils/bluetooth.js'
	export default {
		data() {
			return {
				list: [],
				isLoad: false,
				loadingFinsh: false,
				loadingShow: false,
				totalCount: 0,
				pageNum: 1,
				leftIcon: 'home',
				pageSize: 10,
				equipmentNo: '',
				cdequipmentNo: '',
				details: {},
				detailList: {},
				blueType: 2,
				isHaveGodd: false,
				navList: [{
						title: '商家主页',
						icon: '/static/shop_blue.png',
						path: '/pages/store/index'
					},
					// store(id) {
					// 	uni.reLaunch({
					// 		url: `/pages/store/index?shopId=${id}`
					// 	})
					// },
					{
						title: '商家超市',
						icon: '/static/sellshop.png',
						path: '/pages/store/supermarket'
					},
					{
						title: '商家服务',
						icon: '/static/sjfw.png',
						path: '/pages/store/business-services'
					},
					{
						title: '私密商城',
						icon: '/static/store.png',
						path: '/pages/special-price-mall/index'
					}
				]
			}
		},
		computed: {
			bluetoothStatus() {
				return this.$store.getters.bluetoothStatus
			},
			bluetoothObj() {
				return this.$store.getters.bluetoothObj
			}
		},
		onLoad(option) {
			this.equipmentNo = option.equipmentNo;
			// if(this.bluetoothStatus){

			// }

			// const equipmentNo = ''+res.result.replace('https://mao.allseller.cn/mp?tid=','') // res.resul
			// // const equipmentNo = 'RKE0500700' // res.resul
			// uni.setStorageSync('equipmentNo', equipmentNo)

			// uni.reLaunch({
			// 	url: `/pages/online/index?equipmentNo=${equipmentNo}`
			// })
			// }

			if (option.scene) {
				let scene = decodeURIComponent(option.scene);
				let equipmentNo = scene.replace("equipmenNo=", '');
				console.log(equipmentNo)

				uni.setStorageSync("inTell", "2");
				this.equipmentNo = equipmentNo
				uni.setStorageSync('equipmentNo', equipmentNo)

				// this.equipmentNo = equipmentNo
				// uni.setStorageSync('equipmentNo', equipmentNo)
				uni.setStorageSync('BLUE_NAME', 'B6216') // 蓝牙名字
				uni.setStorageSync('UUID_SERVICE', '00010203-0405-0607-0809-0A0B0C0D1910') //服务UUID，设备方提供
				uni.setStorageSync('UUID_CHAR', '00010203-0405-0607-0809-0A0B0C0D2B10') //特征值UUID，设备方提供				
				const bluetoothObj = new bluetoothDevice()
				this.$store.commit('user/SET_BLUETOOTH_OBJ', bluetoothObj);
				this.bluetoothObj.disconnectBle()
			}

			console.log("xxxxxxxxxxxxxxxxxxxxxxx")
			console.log(this.equipmentNo)
			console.log(this.equipmentNo == '6216')
			console.log("xxxxxxxxxxxxxxxxxxxxxxx")
			this.getOnline()
		},

		onShow() {
			this.resetList()
			const that = this
			/* 监听蓝牙设备的连接状态 */
			uni.onBLEConnectionStateChange(function(res) {
				console.log(res.deviceId + "连接状态*****:" + res.connected)
				if (res.connected == false) {
					that.$store.commit('user/UPDATE_STATUS', res.connected);
				}
			})
		},
		onReachBottom() {
			this.pageNum = this.pageNum + 1
			this.getList()
		},

		onUnload() {
			console.log('页面卸载')
			clearTimeout(this.bluetoothObj.timer)
		},
		methods: {
			toLinkWifi() {
				uni.navigateTo({
					url: `/pages/store/wifi?details=${encodeURIComponent(JSON.stringify(this.detailList))}&shopId=${this.detailList.id}`
				})
			},
			handleOpenLocation() {
				const that = this;
				const {
					latitude,
					longitude,
					name,
					cityName,
					districtName,
					address
				} = that.details;
				console.log(that.details)
				let lng = that.convert2TecentMap(longitude, latitude).lng
				let lat = that.convert2TecentMap(longitude, latitude).lat
				console.log(lng, lat, name, address)
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					name,
					address: cityName + districtName + address
				});
			},
			convert2TecentMap(lng, lat) {
				if (lng == '' && lat == '') {
					return {
						lng: '',
						lat: ''
					}
				}
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0
				var x = lng - 0.0065
				var y = lat - 0.006
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
				var qqlng = z * Math.cos(theta)
				var qqlat = z * Math.sin(theta)
				return {
					lng: qqlng,
					lat: qqlat
				}
			},
			// a() {
			// 	this.bluetoothObj.disconnectBle()
			// },
			// 重新链接
			bluetoothReset() {
				if (!this.isHaveGodd) {
					console.log("xxxxxxxxxxxxxxx进来了")
					return
				}
				if (this.blueType == 1) {
					this.bluetoothObj.reset(this.equipmentNo)
				} else {
					this.bluetooth(this.equipmentNo)
				}
			},
			getOnline() {
				const data = {
					equipmentNo: this.equipmentNo,
					cdequipmentNo: this.cdequipmentNo,
				}
				getByEquipmentNo(data).then(respanse => {
					console.log("xxxxxxxxxxxxxxx进来了")
					if (respanse.code != 200) {
						this.isHaveGodd = false
						return
					} else {
						this.isHaveGodd = true
					}
					this.details = respanse.result
					this.cdequipmentNo=respanse.result.cdequipmentNo
					this.getShopDetail(this.details.shopId)
					console.log(respanse.result)
					this.getDevices(respanse.result.brand)
				})
			},
			getShopDetail(shopId) {
				shopDetail({
					shopId
				}).then((res) => {
					this.detailList = res.result
				})
			},
			getDevices(type) {
				if (type.indexOf('dongguan') != -1) {
					this.blueType = 1
				}
				if (this.blueType == 1) {
					// const bluetoothObj = new bluetoothDevice()
					// this.$store.commit('user/SET_BLUETOOTH_OBJ', bluetoothObj);
					// const bluetoothObj = new bluetoothDevice()
					// this.$store.commit('user/SET_BLUETOOTH_OBJ', bluetoothObj);
					this.bluetoothObj.initEventDevice(this.equipmentNo)
				} else {
					this.bluetooth(this.equipmentNo)
				}
			},


			resetList() {
				this.list = []
				this.isLoad = false
				this.loadingFinsh = false
				this.loadingShow = false
				this.totalCount = 0
				this.pageNum = 1
				this.getList()
			},

			getList() {
				const len = this.list.length
				if (this.totalCount == len && this.isLoad) {
					this.loadingFinsh = true,
						this.loadingShow = false
					return
				}
				this.loadingShow = true
				const data = {
					equipmentNo: this.equipmentNo,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				equipmentProductPage(data).then(respanse => {
					const {
						rows,
						total
					} = respanse.result
					if (rows) {
						console.log(rows)
						this.list = this.list.concat(rows)
					}
					this.totalCount = total
					this.isLoad = true
					this.loadingShow = false
				})
			},

			confirmOrder(equipmentProductId, index) {
				console.log(this.blueType)
				uni.navigateTo({
					url: `/pages/online/confirm-order?equipmentProductId=${equipmentProductId}&equipmentNo=${this.equipmentNo}&blue=${this.blueType}`
				})
			},
			mobileCharge() {
				console.log("cdequipmentNo----------------"+this.cdequipmentNo)
				if(!this.$store.getters.bluetoothStatus&&this.cdequipmentNo ==null){
					uni.showToast({
						title: "蓝牙未连接",
						icon: 'none',
						duration: 2000
					})
				}else{
					const bluetoothObj = new bluetoothDevice()
					this.$store.commit('user/SET_BLUETOOTH_OBJ', bluetoothObj);
					if(this.equipmentNo.indexOf('23THCBCL') == -1&&this.equipmentNo.indexOf('CD') == -1){
						if(this.cdequipmentNo!=null&&this.cdequipmentNo!=this.equipmentNo){
							console.log("佛山设备----------------"+this.cdequipmentNo)
							this.bluetoothObj.disconnectBle()
							if (this.blueType == 1) {
								this.bluetoothObj.reset(this.cdequipmentNo)
							} else {
								this.bluetooth(this.cdequipmentNo)
							}
							uni.navigateTo({
								url: `/pages/mobile-charge/index?equipmentNo=${this.cdequipmentNo}&blue=${this.blueType}&shop=${this.details.shopId}`
							})
						}else{
							console.log("东莞设备----------------"+this.cdequipmentNo)
							uni.navigateTo({
								url: `/pages/mobile-charge/index?equipmentNo=${this.equipmentNo}&blue=${this.blueType}&shop=${this.details.shopId}`
							})
						}
						
					}else{
						console.log("这是充电线----------------"+this.cdequipmentNo)
						uni.navigateTo({
							url: `/pages/mobile-charge/index?equipmentNo=${this.equipmentNo}&blue=${this.blueType}&shop=${this.details.shopId}`
						})
					}
				}
				
			},

			handlePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},

			toLink(url) {
				if (url == '/pages/special-price-mall/index') {
					uni.reLaunch({
						url
					})
				} else if (url == '/pages/store/index') {
					uni.navigateTo({
						url: `${url}?shopId=${this.details.shopId}`
					})
					// 		url: `/pages/store/index?shopId=${id}`
				} else {
					uni.navigateTo({
						url: `${url}?shopId=${this.details.shopId}`
					})
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.acc {
		display: inline-block;
		vertical-align: middle;
		width: 50%;
	}

	.bluetooth-status {
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		z-index: 2;
		align-items: center;
		padding: 0 43rpx 0 54rpx;
		background: #ED602B;

		.icon {
			width: 15rpx;
			height: 24rpx;
		}

		.desc {
			flex: 1;
			margin-left: 15rpx;
			line-height: 61rpx;
			font-size: 26rpx;
			color: #fff;
		}

		.num {
			line-height: 61rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.place {
		height: 61rpx;
		visibility: hidden;
	}

	.seller-infor {
		display: flex;
		padding: 41rpx 10rpx 47rpx 45rpx;
		background-color: #fff;

		.logo {
			width: 132rpx;
			height: 132rpx;
			background-color: #F5F5F5;
			border-radius: 10rpx;
		}

		.text {
			flex: 1;
			padding-top: 3rpx;
			margin-left: 23rpx;
			overflow: hidden;

			.name-wrapper {
				display: flex;

				.name {
					flex: 1;
					max-width: 450rpx;
					line-height: 40rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #060606;
				}

				// .tel {
				// 	padding: 0 23rpx;
				// 	width: 40rpx;
				// 	height: 40rpx;
				// }
				.tel {
					justify-content: right;
					padding: 5rpx 5rpx 5rpx 15rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.txt {
				display: flex;
				margin-top: 11rpx;

				.icon {
					margin-right: 6rpx;
					width: 34rpx;
					height: 34rpx;
				}

				.con {
					flex: 1;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.nav-wrapper {
		display: flex;
		padding: 0 25rpx;

		.nav-item {
			padding: 28rpx 0 9rpx;
			flex: 1;

			.icon {
				display: block;
				margin: 0 auto;
				width: 97rpx;
				height: 97rpx;
				border-radius: 50%;
				background-color: #fff;
			}

			.title {
				margin-top: 11rpx;
				line-height: 44rpx;
				text-align: center;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

	.mobile-charge {
		margin: 30rpx auto 0;
		width: 644rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(-90deg, #5FD150, #3A9A15);
		border-radius: 45rpx;
		font-size: 36rpx;
		color: #fff;
	}

	.product-wrapper {
		margin: 34rpx auto 0;
		width: 644rpx;

		.title {
			line-height: 90rpx;
			text-align: center;
			margin: 30rpx auto 0;
			width: 644rpx;
			font-size: 36rpx;
			color: #fff;
			height: 90rpx;
			background: linear-gradient(-90deg, #5FD150, #3A9A15);
			border-radius: 45rpx;
			background: #4B4949;
			box-shadow: 1px 5rpx 9rpx 0px rgba(230, 230, 230, 0.3);
		}

		.product-list {
			padding-top: 17rpx;
			background-color: #fff;

			.product-item {
				display: flex;
				padding: 29rpx 24rpx 29rpx 47rpx;

				.img-wrapper {
					position: relative;
					width: 156rpx;
					height: 156rpx;
					border-radius: 10rpx;
					overflow: hidden;

					.img {
						width: 156rpx;
						height: 156rpx;
						background-color: #F5F5F5;
					}

					.sload-none {
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						background: rgba(0, 0, 0, .25);
						border-radius: 10rpx;
						z-index: 10;

						.solod-img {
							width: 156rpx;
							height: 156rpx;
						}
					}

					.status-wrapper {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						padding-top: 48rpx;
						text-align: center;
						background-color: rgba(0, 0, 0, 0.6);

						.status {
							line-height: 1;
							font-size: 30rpx;
							color: #fff;
						}

						.line-wrapper {
							display: flex;
							margin: 8rpx 25rpx 5rpx;

							.line {
								flex: 1;
								border-bottom: 2px solid #fff;
							}

							.dian {
								margin: 0 12rpx;
								width: 2px;
								height: 2px;
								background-color: #fff;
							}
						}

						.status-en {
							line-height: 1;
							font-size: 30rpx;
							color: #fff;
						}
					}
				}

				.text {
					flex: 1;
					padding-top: 21rpx;
					margin-left: 39rpx;
					overflow: hidden;

					.name {
						line-height: 38rpx;
						font-size: 28rpx;
						color: #080808;
					}

					.specifications {
						margin-top: 2rpx;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #818181;
					}

					.price {
						margin-top: 23rpx;
						line-height: 38rpx;
						font-size: 28rpx;
						color: #080808;
					}
				}

				.btn {
					margin-top: 102rpx;
					width: 132rpx;
					height: 55rpx;
					font-size: 22rpx;
					color: #fff;
					background: linear-gradient(-90deg, #ED602B, #F19136);
					border-radius: 28rpx;
				}
			}
		}
	}
</style>
